<template>
  <el-container>
    <el-header>
      <el-row style="text-align: center;">
        <el-col :span="24">
          <el-menu
            router="router"
            class="el-menu-demo"
            style="position:static;"
            mode="horizontal"
          >
            <el-row>
              <el-col :span="3" v-for="(item,index) in compilationClassifyAll">
                <el-menu-item @click="changeClassify(index)" :class="{'active':classify===index}">
                  {{ item.name }}
                </el-menu-item>
              </el-col>
              <el-col :span="3">
                <el-menu-item disabled>
                  角落待着吧
                </el-menu-item>
              </el-col>
            </el-row>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <transition name="el-zoom-in-center" >

        <el-main v-show="classifyShow===index" v-if="classifyIf===index" v-for="(item,index) in compilationClassifyAll"
        >
          <el-card v-for="(compilation, index) in item.foods" :body-style="{ padding: '0px' }"
                   style="width: 22%;float: left;height: 510px;margin: 1.5%"
          >
            <el-tooltip class="item" effect="dark" placement="right" @click.native="openCompilation(compilation.cat)">
              <img :src="compilation.icon"
                   class="image" height="400px" style="cursor:pointer;width:100%"
              >
              <div slot="content" style=" max-width: 260px;;display: inline-block">{{ compilation.descri }}</div>
            </el-tooltip>
            <div style="padding: 10px;">
              <div>合集标题：《{{ compilation.name }}》</div>
              <div>创建时间：{{ compilation.createTime }}</div>
            </div>
          </el-card>
        </el-main>
      </transition>
    </el-container>
  </el-container>
</template>

<script>
import {
  listCompilation,
  getCompilation,
  delCompilation,
  addCompilation,
  updateCompilation,
  compilationClassifyAll
} from '@/api/compilation/compilation'

export default {
  name: 'Compilation',
  data() {
    return {
      currentDate: new Date(),
      compilationList: null,
      cardWidth: '200px',
      compilationClassifyAll: [],
      tabPosition: 'left',
      classify: 0,
      classifyShow: -1,
      classifyIf: -1,
    }
  },
  created() {

    let screenWidth = document.documentElement.clientWidth
    const number = screenWidth / 400
    this.cardWidth = screenWidth / number + 'px'

  },
  mounted: function() {
    compilationClassifyAll().then(res => {
      console.log(res)
      this.compilationClassifyAll = res.data
    })
    this.getList()
  },
  methods: {
    openCompilation(id) {
      this.$tab.openPage('title', '/note/compilation/CompilationStep?id=' + id)
    },
    createCompilation() {
      console.log('创建合集')
    },
    changeClassify(classify) {
      this.classify = classify
      let that=this
      setTimeout(function() {
        that.classifyShow = classify
        setTimeout(function() {
          that.classifyIf = classify
        },200)
      },200)
    },
    /** 查询合集列表 */
    getList() {
      this.loading = true
      listCompilation({ 'pageSize': 100 }).then(response => {
        this.compilationList = response.rows
        this.total = response.total
        this.loading = false
      })
    }
  }

}
</script>


<style scoped>
.titleSpan {
  font-size: 30px;
  text-align: center;
  display: block;
  background-color: #23EE7AFF
}


.el-main {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-top: 60px;
  background-color: #00afff;
  z-index: 1;
}

.el-foot {
  height: 0;
}

.el-container {
  background-color: #2b2f3a;
}


.item {
  margin-right: 10px;
}

.active {
  background-color: #00afff;
}

/deep/ .el-header {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  padding: 0px;
  width: 100%;
  position: fixed;
  z-index: 2;
}

</style>
